<template>
<div class="add">
    <van-nav-bar
  title="提交请假登记"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<van-field v-model="names" label="请假人姓名" />
<van-field v-model="classs" label="请假人班级" />
<van-field v-model="text" label="发病症状" />
<van-field name="radio" label="单选框">
  <template #input>
    <van-radio-group v-model="checked" direction="horizontal">
      <van-radio name="1">事假</van-radio>
      <van-radio name="2">病假</van-radio>
    </van-radio-group>
  </template>
</van-field>
<van-field v-model="diagnose" label="诊断疾病" />
<van-field v-model="studentTelephone" label="请假人电话"/>
<van-field v-model="usersNickTelephone" label="上报老师电话"/>
<van-cell title="诊断日期" :value="diagnosis" @click="diagnosisShow = true" />
<van-calendar v-model:show="diagnosisShow" @confirm="onConfirm" />
<van-cell title="发病日期" :value="morbidity" @click="morbidityShow = true" />
<van-calendar v-model:show="morbidityShow" @confirm="onConfirm1" />
<van-cell title="请假开始和结束日期" :value="leave" @click="leaveShow = true" />
<van-calendar v-model:show="leaveShow" type="range" @confirm="onConfirm2" />

  <van-field
    v-model="leaveDetailes"
    rows="2"
    autosize
    label="请假详情"
    type="textarea"
    maxlength="100"
    placeholder="请输入留言"
    show-word-limit
  />
  <van-button type="primary" style="width:100%" round @click="handleAdd">提交</van-button>
  </div>
</template>

<script setup>

import { reactive,toRefs} from 'vue';
import { leaves } from '../model/until';
import userFlag from '@/hooks/unti'
userFlag()
console.log(11)
const data = reactive({
    leave: '',
    leaveShow: false,
    diagnosis:'',
    diagnosisShow: false,
    morbidity: '',
    morbidityShow: false,
    text: '',
    diagnose: '',
    leaveDetailes: '',
    studentTelephone: '',
    usersNickTelephone: '',
    names: '',
    checked: 0,
    classs:''
})
    const onClickLeft = () => history.back();
    const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const onConfirm = (value) => {
      data.diagnosisShow = false;
      data.diagnosis = formatDate(value);
    };
    const onConfirm1 = (value) => {
      data.morbidityShow = false;
      data.morbidity = formatDate(value);
    };
    const onConfirm2 = (value) => {
        const [start, end] = value;
        data.leaveShow = false;
        data.leave = `${formatDate(start)} / ${formatDate(end)}`;
    }
    const handleAdd1 = ()=> {
        console.log(data.diagnosis)
    }
    const handleAdd = ()=>{
        console.log(11)
        leaves({
            studentName:data.names,
            studentTelephone:data.studentTelephone,
            usersNickTelephone:data.usersNickTelephone,
            leaveDetailes:data.leaveDetailes,
            onsetSymptoms:data.text,
            diagnose:data.diagnose,
            leaveType:data.checked,
            diagnosisTime:data.diagnosis,
            morbidityTime:data.morbidity,
            leaveTimeStart:data.leave.split('/')[0],
            leaveTimeEnd:data.leave.split('/')[1],
            classs:data.classs,
        },{
            Authorization:window.localStorage.getItem('token')}).then(res=>{
            history.back()
        })
    }
    const { leave,leaveShow,diagnosis,diagnosisShow,morbidity,morbidityShow,text,diagnose,leaveDetailes,studentTelephone,usersNickTelephone,names,checked,classs } = toRefs(data)

</script>

<style lang="scss" scoped>
.add{
    background: #ecede7;
    padding: 0 10px;
    box-sizing: border-box;
}
.van-cell{
    margin-top: 10px;
    margin-bottom:10px ;
}

</style>